<template>
  <div class="app-header">
    <div class="left-section">
      <!-- 收缩按钮 -->
      <span 
        class="collapse-btn"
        :class="collapseIcon" 
        @click="$emit('collapse')" 
        :title="collapseTitle"
      ></span>
      
      <!-- 返回按钮 -->
      <span 
        class="back-btn"
        @click="back" 
        title="返回"
      >
        <i class="el-icon-back"></i>
      </span>
      
      <!-- 页签导航 -->
      <el-breadcrumb class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/manage/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ routePath }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <!-- 用户菜单 -->
    <el-dropdown class="user-menu">
      <span class="el-dropdown-link">
        <div class="user-info">
          <img :src="baseApi + user.avatarUrl" class="avatar">
          {{ user.nickname }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
      </span>
      
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="$router.push('/manage/person')">
            <i class="el-icon-user"></i> 个人信息
          </el-dropdown-item>
          <el-dropdown-item @click="logout">
            <i class="el-icon-switch-button"></i> 退出
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "AppHeader", // 组件名改为多单词形式
  props: {
    collapseIcon: String,
    collapseTitle: String,
    user: Object
  },
  data() {
    return {
      routePath: '',
      baseApi: this.$store.state.baseApi
    }
  },
  watch: {
    '$route': {
      handler: function(newRoute) {
        this.routePath = newRoute.meta?.path || '未知页面';
      },
      immediate: true // 初始化时执行一次
    }
  },
  methods: {
    logout() {
      localStorage.removeItem("user");
      this.$router.push('/login');
      this.$message.success("退出成功");
    },
    back() {
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.app-header {
  display: flex;
  align-items: center;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  padding: 0 20px;
}

.left-section {
  display: flex;
  align-items: center;
  flex: 1;
}

.collapse-btn, .back-btn {
  font-size: 25px;
  cursor: pointer;
  margin-right: 15px;
}

.breadcrumb {
  font-size: 16px;
}

.user-menu {
  margin-right: 20px;
}

.user-info {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}
</style>